<template>
	<view>
		<view class="ek-card">
			<view class="h2">订单编号：{{ info.order_sn }}</view>
			<view class="h2">订单金额：￥{{ info.total_price }}</view>
			<view class="h2 flex aic">退款金额：<text class="ek-color-red">￥{{ info.total_price  }}</text>
			</view>
		</view>

		<view class="ek-card">
			<view>
				<view class="h1">预计到店时间<text>{{merInfo.arrive_time | formatDate}}</text></view>

				<view class="h3">预定手机号{{ merInfo.phone }}</view>
				<view class="h3">
					<text>用餐人数</text><text>{{merInfo.person_number}}人</text><text>{{merInfo.name}}({{merInfo.number}})</text>
				</view>
			</view>
		</view>

		<picker mode="selector" :range="refund_msg" @change="onRefundOrder">
			<view class="ek-cell">
				<view class="ek-title">退款原因 <text v-if="msg">：{{msg}}</text></view>
				<view class="iconfont icon-jiantou"></view>
			</view>
		</picker>

		<view class="ek-submit-btn" @click="onSubmit">确定</view>
	</view>
</template>

<script>
	import productConSwiper from "@/components/productConSwiper/index.vue";
	import {
		HTTP_REQUEST_URL
	} from "@/config/app";
	import {
		activityRefundOrder,
		payActivity,
		performGetOrderDetail,
		show_merchant_reserve
	} from "@/api/2_activity";
	import {
		groupOrderDetail,
		getOrderDetailType,
		refundMessage,
		refundApply,
		refund_canting_message 
	} from "@/api/order";
	export default {
		components: {
			productConSwiper
		},
		data() {
			return {
				item: {},
				info: {},
				refund_msg: [],
				msg: '',
				day_time: '',
				order_id: '',
				sub_bill: '',
				merInfo: {}
			};
		},
		onLoad(options) {
			this.order_id = options.order_id
			// this.day_time = options.day_time
			// this.sub_bill = options.sub_bill
			// this.info = JSON.parse(options.info)
			// this.refund_msg = JSON.parse(options.refund_msg)
			this.init()
			this.show_merchant_reserve()
			// 退款理由
			this.refundMessage()

		},
		computed: {
			pay_money() {
				return ''
				// return  this.info.child.reduce((a, b)=>{
				//     return +a + +b.price
				// }, 0)
			}
		},
		methods: {
			refundMessage() {
				refund_canting_message().then(res => {
					this.refund_msg = res.data
				})
			},
			show_merchant_reserve() {
				show_merchant_reserve(this.order_id).then(res => {
					let {
						info
					} = res.data
					this.merInfo = info
				})
			},
			openTip() {
				uni.showModal({
					title: '退款规则',
					content: `距离演出开始时间${this.day_time}天之内可全额退款，距离演出开始xx分钟可退款订单金额的${ 100 - this.sub_bill}%`,
					showCancel: false,
					confirmText: '我知道了'
				})
			},
			init() {
				getOrderDetailType(this.order_id).then(res => {
					let {
						data
					} = res
					this.info = data
				})
			},
			onRefundOrder(e) {
				this.msg = this.refund_msg[e.detail.value]
			},
			onSubmit() {
				if (this.msg == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择退款原因'
					})
					return
				}
				let ids = []
				this.info.orderProduct.map(item => {
					ids.push(item.order_product_id)
				})
				refundApply(this.order_id, {
					ids: ids.toString(),
					refund_price: this.info.total_price,
					refund_type: "1",
					type: "1",
					refund_message: this.msg,
					mark: "",
					num: this.info.total_num
				}).then(res => {
					this.$util.Tips({
						title: '提交成功',
						icon: 'success'
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						})
					}, 600)

				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err
					})
				})
			}
		}
	};
</script>

<style lang="scss">
	@import "./style.scss";

	.tip {
		width: 20px;
		height: 20px;
		border-radius: 20px;
		background: #e93323;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 10px;
	}
</style>
